Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইন সহজ এবং দ্রুত করে তোলে। এটি বিভিন্ন মৌলিক স্টাইলিং ফিচার প্রদান করে, যার মধ্যে Typography এবং Font Styling অন্যতম। এই ফিচারগুলি ব্যবহার করে আপনি আপনার ওয়েব পেজের টেক্সট এবং ফন্টের দৃশ্যমানতা এবং পাঠযোগ্যতা উন্নত করতে পারবেন।
Pure.CSS এর Typography এবং Font Styling
Pure.CSS স্বয়ংক্রিয়ভাবে একটি বেসিক টেক্সট স্টাইলিং সেটআপ প্রদান করে, তবে আপনি চাইলে কাস্টমাইজড ফন্ট স্টাইলিং এবং টাইপোগ্রাফি ব্যবহার করতে পারেন। Pure.CSS-এ টাইপোগ্রাফি ও ফন্ট স্টাইলিংয়ের জন্য কিছু প্রাথমিক স্টাইলিং পদ্ধতি রয়েছে, যা দ্রুত ওয়েব পেজের লেআউট তৈরি করতে সাহায্য করে।
1. Basic Typography in Pure.CSS
Pure.CSS কিছু প্রাথমিক টেক্সট স্টাইলিং দেয়, যেমন হেডিং, প্যারাগ্রাফ, লিস্ট এবং লিঙ্কের জন্য সেমি-ডিফল্ট স্টাইল। আপনি এগুলো কাস্টমাইজও করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Typography Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<h1 class="pure-u-1-1">This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph of text styled using Pure.CSS. The font and spacing are set to a default style provided by Pure.CSS.</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</body>
</html>
ব্যাখ্যা:
- Headings: Pure.CSS দ্বারা হেডিংগুলির জন্য কিছু ডিফল্ট স্টাইলিং প্রযোজ্য।
- Paragraphs: Pure.CSS স্বয়ংক্রিয়ভাবে প্যারাগ্রাফের জন্য বেসিক মার্জিন এবং লাইন হাইট সেট করে দেয়।
- Lists: লিস্ট আইটেমগুলির জন্য স্টাইলিংও অন্তর্ভুক্ত থাকে।
2. Font Styling in Pure.CSS
Pure.CSS কোনো নির্দিষ্ট ফন্টের জন্য ডিফল্ট স্টাইলিং প্রদান করে না, তবে আপনি এটি কাস্টমাইজ করতে পারেন। সাধারণত, ফন্ট স্টাইলিংয়ের জন্য আপনি font-family, font-size, font-weight, এবং line-height ব্যবহার করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Font Styling Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
body {
font-family: 'Arial', sans-serif; /* Custom font-family */
font-size: 16px; /* Set font size */
line-height: 1.6; /* Adjust line height for readability */
}
h1 {
font-family: 'Georgia', serif; /* Different font for h1 */
font-size: 2em; /* Larger font size for headings */
font-weight: bold; /* Bold font for h1 */
}
p {
font-size: 1em;
font-style: italic; /* Italicize paragraphs */
}
a {
font-family: 'Verdana', sans-serif;
text-decoration: underline; /* Underline links */
}
</style>
</head>
<body>
<h1>This is a Custom Heading Style</h1>
<p>This is a paragraph with custom font style and size. It uses Arial as the font-family, with an increased line height for better readability.</p>
<p><a href="#">This is a link with custom font styling.</a></p>
</body>
</html>
ব্যাখ্যা:
- Font-family: আপনি
Arial,Georgia, এবংVerdanaএর মতো কাস্টম ফন্ট ব্যবহার করতে পারেন। আপনি যদি Google Fonts বা অন্য কোনো ফন্ট উৎস ব্যবহার করতে চান, তাহলে সেই ফন্ট যোগ করা যায়। - Font-size: এটি পাঠ্যের আকার নির্ধারণ করতে ব্যবহৃত হয়, যেমন
1em,2emইত্যাদি। - Font-weight: এটি টেক্সটের বোল্ডনেস কন্ট্রোল করে।
bold,normal, বা একটি নির্দিষ্ট সংখ্যা (যেমন400,700) ব্যবহার করা যেতে পারে। - Font-style: প্যারাগ্রাফ বা কোনো নির্দিষ্ট এলিমেন্টকে ইটালিক বা নরমাল করার জন্য ব্যবহার হয়।
3. Google Fonts Integration
Pure.CSS-এর মাধ্যমে আপনি সহজেই Google Fonts ইন্টিগ্রেট করতে পারেন, যা আপনার ওয়েব পেজের জন্য কাস্টম ফন্ট ব্যবহার করতে সহায়ক। Google Fonts ব্যবহার করে আপনি আরও বেশি ভিন্ন ধরনের ফন্ট অ্যাড করতে পারবেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts with Pure.CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- Import Google Font -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
body {
font-family: 'Roboto', sans-serif; /* Apply Google Font */
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a Heading with Roboto Font</h1>
<p>This is a paragraph with the Roboto font family. The font is being loaded from Google Fonts.</p>
</body>
</html>
ব্যাখ্যা:
- Google Fonts: এখানে Roboto ফন্ট ব্যবহার করা হয়েছে। ফন্টের স্টাইল লোড করার জন্য Google Fonts API ব্যবহার করা হয়েছে এবং সেই ফন্টটি
font-familyহিসেবে প্রয়োগ করা হয়েছে।
4. Adjusting Line Height and Letter Spacing
Pure.CSS-এ টেক্সটের line-height এবং letter-spacing কাস্টমাইজ করা খুবই সহজ। এটি টেক্সটের পড়ার অভিজ্ঞতাকে উন্নত করতে সাহায্য করে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Height and Letter Spacing Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
p {
font-size: 1.2em;
line-height: 1.8; /* Increase line height for better readability */
letter-spacing: 0.5px; /* Add some spacing between letters */
}
</style>
</head>
<body>
<p>This paragraph has a custom line height and letter spacing applied to improve readability and visual appeal.</p>
</body>
</html>
ব্যাখ্যা:
- line-height: এটি টেক্সটের লাইনের মধ্যে জায়গা বাড়ায়, যাতে প্যারাগ্রাফগুলি বেশি পরিষ্কার এবং পড়তে সহজ হয়।
- letter-spacing: এটি টেক্সটের মধ্যে অক্ষরের মাঝে জায়গা বাড়ায়, যাতে টেক্সট দেখতে আরও প্রফেশনাল লাগে।
Pure.CSS-এ Typography এবং Font Styling করার মাধ্যমে আপনি দ্রুত এবং সহজে আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের টেক্সট স্টাইলিং করতে পারেন। Font-family, Font-size, Line-height, এবং Letter-spacing এর মতো স্টাইলিং প্রপার্টিগুলি ব্যবহার করে আপনি আপনার কন্টেন্টকে আরও আকর্ষণীয় এবং পাঠযোগ্য করতে পারবেন। Google Fonts-এর মাধ্যমে আপনি কাস্টম ফন্ট ইন্টিগ্রেট করেও Pure.CSS এর বেসিক স্টাইলিং আরও উন্নত করতে পারেন।
Read more
